import { driver } from "driver.js"
import "driver.js/dist/driver.css"

const useHomeDriver = (prefix: string = "Aling-editor") => {
  const driverObj = driver({
    onDestroyed: () => {
      localStorage.setItem(prefix, "1")
    },
    showProgress: true,
    onPopoverRender(popover, opts) {
      popover.nextButton.style.backgroundColor = "#1677ff"
      popover.nextButton.style.color = "white"
      popover.nextButton.style.textShadow = "none"
    },
    doneBtnText: "结束导航",
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    steps: [
      {
        popover: {
          title: "你好",
          description: "欢迎来到Avidor，我们将会带你了解Avidor的相关功能。",
          align: "center",
          doneBtnText: "不必了",
          nextBtnText: "好的",
          showButtons: ["close", "next"],
        },
      },
      {
        element: ".header-avatar",
        popover: {
          description:
            "点击头像你可进行登录/注册操作，对于登录的用户将会展开右侧操作菜单。",
          side: "right",
          align: "start",
        },
      },
      {
        element: ".editor-root",
        popover: {
          description: "您可在编辑器中编辑您的文件",
          side: "top",
          align: "end",
        },
      },
      {
        element: ".adm-tabs-tab-list",
        popover: {
          description:
            "编辑器分为文章编辑器和记忆编辑器，前者支持更为复杂的编辑模式，通过点击Tab可以切换不同的编辑器。",
          side: "bottom",
          align: "start",
        },
      },
      {
        element: ".title-input",
        popover: {
          description: "在此输入文章的标题",
          side: "left",
          align: "start",
        },
      },
      {
        popover: {
          description:
            "您的文件将会自动保存，登录后你还可以将文件保存至您的账号下，赶紧试试吧",
          side: "over",
          align: "center",
        },
      },
    ],
  })
  if (!localStorage.getItem(prefix)) {
    return setTimeout(() => {
      driverObj.drive()
    }, 300)
  }
}
const useSideMenuDriver = (prefix: string = "Aling-side-menu") => {
  const driverObj = driver({
    onDestroyed: () => {
      localStorage.setItem(prefix, "1")
    },
    showProgress: true,
    onPopoverRender(popover, opts) {
      popover.nextButton.style.backgroundColor = "#1677ff"
      popover.nextButton.style.color = "white"
      popover.nextButton.style.textShadow = "none"
    },
    doneBtnText: "结束导航",
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    steps: [
      {
        popover: {
          title: "你好",
          description:
            "接下来我们将带您了解菜单栏的操作，这些较为重要，可以帮助您更好的使用账号功能",
          align: "center",
          doneBtnText: "不必了",
          nextBtnText: "好的",
          showButtons: ["close", "next"],
        },
      },
      {
        element: ".side-menu-new",
        popover: {
          title: "新建文件",
          description: "执行此操作将会清空当前文章编辑器并初始化一个新文件",
          side: "right",
          align: "start",
        },
      },
      {
        element: ".side-menu-save",
        popover: {
          title: "保存文件",
          description: "执行此操作将会保存文章编辑器中的文件",
          side: "right",
          align: "start",
        },
      },
      {
        element: ".side-menu-update1",
        popover: {
          title: "更新到博客",
          description:
            "执行此操作会将您的文章发布（如果有权限的话）到Aling的博客首页上，这分为两种情况：当您的编辑器不存在文件时，会发布您的所有文章到博客；否则只会发布当前编辑区的文章到博客",
          side: "right",
          align: "start",
        },
      },
      {
        element: ".side-menu-update2",
        popover: {
          title: "更新Memory",
          description:
            "执行操作将会将您所有的Memory记录发布到博客的Memory板块下（如果有权限的话）",
          side: "top",
          align: "end",
        },
      },
    ],
  })
  if (!localStorage.getItem(prefix)) {
    return setTimeout(() => {
      driverObj.drive()
    }, 100)
  }
}
const useMemoryDriver = (prefix: string = "Aling-editor") => {
  const driverObj = driver({
    onDestroyed: () => {
      localStorage.setItem(prefix, "1")
    },
    animate: true,
    showProgress: true,
    onPopoverRender(popover, opts) {
      popover.nextButton.style.backgroundColor = "#1677ff"
      popover.nextButton.style.color = "white"
      popover.nextButton.style.textShadow = "none"
    },
    doneBtnText: "结束导航",
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    steps: [
      {
        element: ".memory-content",
        popover: {
          description: "记忆编辑器与微信朋友圈类似，在此输入文本",
          align: "center",
          nextBtnText: "下一步",
          showButtons: ["close", "next"],
        },
      },
      {
        element: ".memory-location",
        popover: {
          description: "系统会自动定位您所在的位置，当定位失效您也可以手动选择",
          side: "right",
          align: "start",
        },
      },
      {
        element: ".memory-weather",
        popover: {
          description:
            "天气信息基于定位自动查询，单击会基于当前位置重新获取天气信息",
          side: "top",
          align: "end",
        },
      },
      {
        element: ".memory-music",
        popover: {
          description: "您可上传音频作为附件",
          side: "bottom",
          align: "start",
        },
      },
      {
        element: ".memory-psd",
        popover: {
          description: "添加权限认证，未通过认证的用户无法查看到发布的内容",
          side: "left",
          align: "start",
        },
      },
      {
        element: ".memory-save",
        popover: {
          description: "编辑完成后点击发布即可保存到账号下。",
          side: "over",
          align: "center",
        },
      },
    ],
  })
  if (!localStorage.getItem(prefix)) {
    return setTimeout(() => {
      driverObj.drive()
    }, 100)
  }
}
export { useHomeDriver, useMemoryDriver, useSideMenuDriver }
